<template>
  <svg ref="svg" v-if="loading" id="svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path class="shape-overlays__path" :d="path[0]"></path>
    <path class="shape-overlays__path" :d="path[1]"></path>
    <path class="shape-overlays__path" :d="path[2]"></path>
    <path class="shape-overlays__path" :d="path[3]"></path>
  </svg>
</template>
<script>
  export default {
    data: () => ({
      loading: false,
      elm: null,
      numPoints: 3,
      duration: 1000,
      delayPointsArray: [],
      delayPointsMax: 0,
      delayPerPath: 120,
      timeStart: Date.now(),
      isOpened: false,
      path: ["M 0 0C 0 25 0 25 0 50 C 0 75 0 75 0 100 H 0 V 0", "M 0 0C 0 25 0 25 0 50 C 0 75 0 75 0 100 H 0 V 0", "M 0 0C 0 25 0 25 0 50 C 0 75 0 75 0 100 H 0 V 0", "M 0 0C 0 25 0 25 0 50 C 0 75 0 75 0 100 H 0 V 0"]
    }),
    mounted() {
      this.elm = this.$refs.svg;
    },
    methods: {
      start() {
        for (var i = 0; i < this.numPoints; i++) {
          this.delayPointsArray[i] = 0;
        }
        this.loading = true;
        this.isOpened = true;
        this.timeStart = Date.now();
        this.renderLoop();
      },
      finish() {
        for (var i = 0; i < this.numPoints; i++) {
          this.delayPointsArray[i] = 0;
        }
        setTimeout(() => {
          this.isOpened = false;
          this.timeStart = Date.now();
          this.renderLoop();
          setTimeout(() => {
            this.loading = false;
          }, 1000)
        }, 1000)
      },
      updatePath(time) {
        const points = [];
        for (var i = 0; i < this.numPoints; i++) {
          const thisEase = (i % 2 === 1) ? this.sineOut : this.exponentialInOut;
          points[i] = (1 - thisEase(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1))) * 100
        }
        let str = '';
        str += (this.isOpened) ? `M 0 0 H ${points[0]}` : `M ${points[0]} 0`;
        for (var i = 0; i < this.numPoints - 1; i++) {
          const p = (i + 1) / (this.numPoints - 1) * 100;
          const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
          str += `C ${points[i]} ${cp} ${points[i + 1]} ${cp} ${points[i + 1]} ${p} `;
        }
        str += (this.isOpened) ? `H 100 V 0` : `H 0 V 0`;
        return str;
      },
      sineOut(t) {
        const HALF_PI = 1.5707963267948966;
        return Math.sin(t * HALF_PI);
      },
      exponentialInOut(t) {
        return t == 0.0 || t == 1.0
          ? t
          : t < 0.5
            ? +0.5 * Math.pow(2.0, (20.0 * t) - 10.0)
            : -0.5 * Math.pow(2.0, 10.0 - (t * 20.0)) + 1.0;
      },
      render() {
        if (this.isOpened) {
          for (var i = 0; i < this.path.length; i++) {
            this.path.splice(i, 1, this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)))
          }
        } else {
          for (var i = 0; i < this.path.length; i++) {
            this.path.splice(i, 1, this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))))
          }
        }
      },
      renderLoop() {
        this.render();
        if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
          requestAnimationFrame(() => {
            this.renderLoop();
          });
        }
      }
    }
  }
</script>

<style scoped>
  #svg {
    position: fixed;
    top: 0;left: 0;width: 100%;height: 100%;
    z-index: 9999;
    .shape-overlays__path:nth-of-type(1) {fill: #ccc}
    .shape-overlays__path:nth-of-type(2) {fill: #888}
    .shape-overlays__path:nth-of-type(3) {fill: #001B2E}
    .shape-overlays__path:nth-of-type(3) {fill: #FFB608}
  }
</style>
